<template>
  <div class="com-header">
    <div class="header-left">
      <span class="time">{{ time }}</span>
    </div>
    <div class="header-right">

      <div class="user-info">
        <div class="btn-box">
          <div class="btn" @click="jump">
            <i class="icon"></i>
            <span class="text">工作台</span>
            <i class="arrow"></i>
          </div>
        </div>
        <img :src="avatarShow" class="icon"></img>
        <span class="name">{{ type==='anji'?realName:userName }}</span>
        <span class="out" @click="logout">退出</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      date: '',
      time: '',
      timer: null
    }
  },
  computed: {
    ...mapGetters([
      "realName",
      "userName",
      "avatar"
    ]),
    avatarShow(){
      if(this.$store.state.user.avatar){
        return `/api/oss/download/sturgeon?objectName=${encodeURIComponent(this.$store.state.user.avatar)}`
      }else{
        return require('./images/user.png')
      }
    }
  },
  created() {
    this.getDateTime()
  },
  beforeDestroy() {
    clearTimeout(this.timer)
    this.timer = null
  },
  methods: {
    getDateTime() {
      const date = new Date()
      this.date = `${date.getFullYear()}-${this.parseTime(date.getMonth() + 1)}-${this.parseTime(date.getDate())}`
      this.time = this.date + ' ' + `${this.parseTime(date.getHours())}:${this.parseTime(date.getMinutes())}:${this.parseTime(date.getSeconds())}`
      this.timer = setTimeout(() => {
        this.getDateTime()
      }, 1000);
    },
    parseTime(value, limit = 10) {
      return value < limit ? `0${value}` : value
    },
    jump() {
      if (this.type === 'anji') {
        window.open('/modules/maintenance/video/warnMessage')
      } else if (this.type === 'jianguan') {
        window.open('/warning/list')
      }
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.clear();
          this.$store.dispatch("user/FedLogOut").then(() => {
            location.href = "/login";
          });
        })
        .catch(() => {
        });
    },
  }
}
</script>

<style scoped lang="scss">
.com-header {
  width: 100%;
  height: 65px;
  background: url("./images/bg.png") no-repeat center;
  background-size: 100% 100%;
  .header-left {
    position: absolute;
    top: 29px;
    left: 58px;
    color: #4A9EF2;
    display: flex;
    align-items: center;
    height: 34px;
    line-height: 34px;
    .time {
      font-size: 22px;
      font-weight: bold;
    }
  }
  .header-right {
    position: absolute;
    top: 0;
    right: 0;
    .btn-box {
      //position: absolute;
      //right: 281px;
      //top: 35px;
      //display: inline-block;
      margin-right: 40px;
      .btn {
        display: flex;
        align-items: center;
        cursor: pointer;
        .icon {
          width: 23px;
          height: 23px;
          background: url("./images/yujing.png") no-repeat center;
          background-size: 100% 100%;
        }
        .arrow {
          width: 18px;
          height: 18px;
          background: url("./images/arrow.png") no-repeat center;
          background-size: 100% 100%;
        }
        .text {
          font-size: 20px;
          color: #DBE5FA;
          height: 24px;
          line-height: 24px;
          padding: 0 20px;
          word-break: keep-all;
        }
      }
    }
    .user-info {
      position: absolute;
      right: 70px;
      top: 31px;
      height: 34px;
      line-height: 34px;
      //background: red;
      display: flex;
      align-items: center;
      >.icon {
        width: 30px;
        height: 30px;
        display: block;
        border-radius: 50%;
      }
      .name {
        color: #fff;
        font-size: 16px;
        line-height: 27px;
        word-break: keep-all;
        padding-right: 10px;
        padding-left: 6px;
        //min-width: 70px;
        text-align: right;
      }
      .out {
        color: #DF273B;
        font-size: 16px;
        line-height: 27px;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        word-break: keep-all;
        padding: 0 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
